<template>
    <div class="wrapper">
        <van-nav-bar fixed title="商家详情" left-arrow @click-left="$utils.back($route.path);">
        </van-nav-bar>
        <div :class="['has-top', active != 0 ? 'has-bottom-other' : '']">
            <van-swipe class="my-swipe shop-bg" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in ShopSignList" :key="index">
                    <img-box class="shop-bg-box z-inner pos-r" :img-url="item" />
                </van-swipe-item>
            </van-swipe>
            <!-- 商家信息 -->
            <div class="infbox mlr-24 bg-white z-out pos-r br-16">
                <bussiness-detail-item type="detail" :bussiness-item="bussinessItem" @navigation="navigation" />
            </div>
            <!-- tab -->
            <van-tabs ref="tabs" v-model="active" sticky class="tabs1" :offset-top="$conf.stickyTop" @click="ddd"
                @scroll="scroll">
                <!-- <van-tab title="预定服务">
                    <div class="bg-white br-12" style="height:78vh">
                        <div class="flex list-content mt-20">
                            <div class="flex-s-0 scoll-y">
                                <tree :tree-data="classifyList" :active-id="activeId" @treeClickEvent="treeClickEvent" />
                            </div>
                            <div id="scrollBox" ref="scrollBox" class="bg-gray flex-1" :class="scrollTrue?'scoll-y':''">
                                <div class="flex bg-white" v-for="(item, index) in productList" :key="index">
                                    <img-box class="is-130 br-10 flex-s-0 mt-24 mb-34 ml-32" :img-url="item.ProductImg" />
                                    <div class="flex flex-d-c flex-s-fs pt-24 plr-24 pb-24 flex-1 skit">
                                        <div>
                                            <div class="text-show-line-1 fs-24 color-dark lh-34">{{ item.ProductName }}</div>
                                            <div class="flex mt-8">
                                                <span class="plr-8 fs-22 lh-40 color-tagorg bg-tagorg tag mr-8">30平</span>
                                                <span class="plr-8 fs-22 lh-40 color-tagorg bg-tagorg tag mr-8">30平</span>
                                                <span class="plr-8 fs-22 lh-40 color-tagorg bg-tagorg tag mr-8">30平</span>
                                            </div>
                                        </div>
                                        <div class="flex flex-s-c full-width mt-20">
                                            <div class="color-deep lh-xxs flex flex-s-fe mt-12">
                                                <span class="fs-28 ls-4">¥</span><span class="fs-36 ls-0">199</span><span class="fs-20">/晚</span>
                                            </div>
                                            <div class="bg-primary color-white btn fs-24 lh-52 br-45 plr-24 br-26">预定</div>
                                        </div>
                                    </div>
                                </div>
                                <no-data v-if="productList.length === 0" />
                                <p v-if="end===true&&productList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
                            </div>
                        </div>
                    </div>
                </van-tab> -->
                <van-tab title="商品">
                    <div class="bg-white br-12" style="height:78vh">
                        <!-- 商品分类及列表栏 -->
                        <div class="flex list-content mt-20">
                            <!-- 商品分类 -->
                            <div class="flex-s-0 scoll-y">
                                <tree :tree-data="classifyList" :active-id="activeId"
                                    @treeClickEvent="treeClickEvent" />
                            </div>
                            <!-- 商品列表 -->
                            <div id="scrollBox" ref="scrollBox" class="bg-gray flex-1" :class="scrollTrue?'scoll-y':''">
                                <productList :product-list="productList" list-type="quickPlaceOrder"
                                    @goDetailPage="goDetailPage" @goYu="goYu" @updateCart="updateCart"
                                    @showSpec="showSpec" />
                                <no-data v-if="productList.length === 0" />
                                <p v-if="end===true&&productList.length!==0" class="tac fs-24 ptb-40 color-gray-light">
                                    无更多数据</p>
                            </div>
                        </div>
                        <!-- 底部栏购物车 -->
                        <shopCart :car-list="carList" @cleanCart="cleanCart" :storeId="id"
                            @updateCart="carUpdateCart" />

                        <!-- 商品详情弹窗 -->
                        <van-popup v-model="detailShow" position="bottom" class="full-width full-height detail-page">
                            <peoductDetail :detail-data="detailData" :storeId="id" :evaluate-data="evaluateData"
                                @clickLeft="clickLeft" @showOpt="showOpt" @changeAddress="changeAddress" />
                        </van-popup>

                        <!-- 商品规格选择弹窗 -->
                        <van-popup v-model="optPopup.show" position="bottom" class="bottom-popup">
                            <ProductSpec v-show="optPopup.type==='attr'" :data="optPopup.data" :fresh="optPopup.change"
                                :popup-type="optPopup.type" @closePopup="closePopup" @addCart="addCart" />
                        </van-popup>
                    </div>
                </van-tab>
                <van-tab title="商家">
                    <div class="bg-white mg-25 pd-20 br-12">
                        <p class="fs-32 fw-b mb-10">商家介绍</p>
                        <p v-for="(item,index) in descriptionList" :key="index" class="fs-24 description">{{ item }}</p>
                    </div>
                </van-tab>
                <van-tab title="评价">
                    <div class="bg-white mg-25 pd-20 br-12">
                        <p class="fs-32 fw-b mb-10">全部评价</p>
                        <p class="fs-24 description">{{ "暂无评价" }}</p>
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <!-- 地图弹出层 -->
        <van-popup v-model="AmapShow" position="right" class="mapPage">内容
            <amap-select :data-model="bussinessItem" @closeAmap="closeAmap" />
        </van-popup>
    </div>
</template>
<script>
    import imgBox from 'components/imgBox'
    import bussinessDetailItem from 'components/bussinessDetailItem'
    import amapSelect from 'components/amapSelect'
    import tree from 'components/productList/tree'
    import noData from 'components/noData'
    import productList from 'components/productList/index2'
    import shopCart from 'components/shopCart'
    import peoductDetail from 'components/productDetail'
    import ProductSpec from 'components/productDetail/spec'
    import {
        GetSupplierStoreCategory,
        GetWholeSaleListForSku,
        GetUserCarList,
        GetInintProductDetailInfo,
        AddOrEditUserCarList,
        GetCommentListByProduct,
        GetSupplierStoreProductPage
    } from 'api/product'
    import {
        GetStoreInfo
    } from 'api/store'
    export default {
        components: {
            imgBox,
            bussinessDetailItem,
            amapSelect,
            tree,
            noData,
            productList,
            shopCart,
            peoductDetail,
            ProductSpec
        },
        data() {
            return {
                id: '', // 商家ID
                scrollTrue: false, // 是否显示滚动条
                scollTop: 0, // 滚动高度
                ShopSignList: [''], // 背景图
                bussinessItem: {}, // 商家信息
                active: 0, // tab当前选中
                activeId: -1, // 左侧分类栏当前选中
                classifyList: [], // 左侧分类栏配置及数据
                initClassify: true, // 是否需要初始化分类
                productList: [], // 商品列表
                end: false, // 是否加载数据
                updateList: true, // 是否需要更新商品列表
                carList: [], // 购物车数据
                cartRequestList: [], // 更新购物车
                totalAmout: 0, // 数量
                AmapShow: false, // 地图弹层
                detailData: {}, // 商品详情数据
                oldID: 0, // 商品详情ID
                detailShow: false, // 商品详情是否显示
                detailIndex: -1, // 详情当前选中
                SpecIndex: -1, // 规格当前选中
                evaluateData: {}, // 评价数据
                addressList: [], // 收货地址
                optPopup: { // sku 商品规格弹窗
                    data: {},
                    type: '',
                    change: false,
                    show: false
                },
                descriptionList: [], // 商家介绍
                requestData: { // 请求参数
                    ProductType: 1,
                    OrderBy: 'AddTime',
                    sort: 'desc',
                    PageIndex: 1,
                    PageSize: 10,
                    Lng: 0,
                    Lat: 0,
                    Id: 0,
                    storeId: 0,
                    typePath: 0
                },
                commentRequest: { // 评价
                    page: 1,
                    size: 3,
                    product_id: 0
                },
            }
        },
        computed: {

        },
        created() {
            if (this.$route.query.invit_user_id) {
                localStorage.setItem('invit_user_id', this.$route.query.invit_user_id)
            }
            if (this.$route.query && this.$route.query.lng) {
                const _query = this.$route.query
                this.requestData.Lng = _query.lng || 0
                this.requestData.Lat = _query.lat || 0
            } else {
                const _GeolocationData = localStorage.getItem('GeolocationData')
                if (_GeolocationData) { // 存在定位缓存
                    const _GeolocationObj = JSON.parse(_GeolocationData)
                    if (_GeolocationObj.center && _GeolocationObj.center.length > 0) {
                        this.requestData.Lng = _GeolocationObj.center[0]
                        this.requestData.Lat = _GeolocationObj.center[1]
                    } else if (_GeolocationObj.position) {
                        this.requestData.Lng = _GeolocationObj.position.lng
                        this.requestData.Lat = _GeolocationObj.position.lat
                    }
                }
            }
            this.id = this.$route.params.id
            this.requestData.Id = this.$route.params.id
            this.GetStoreInfo()
            this.GetUserCarList()
        },
        mounted() {
            this.$nextTick(function() {
                document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)

            })
            window.addEventListener('scroll', this.handleScroll)
        },
        methods: {
            // 获取商家数据
            GetStoreInfo() {
                GetStoreInfo(this.requestData).then(res => {
                    if (res) {
                        const _this = this
                        const _data = res.Data
                        const _province = _data.ProvinceName || ''
                        const _city = _data.CityName || ''
                        const _detailAddress = _data.ContactAddress || ''
                        _data.DetailAddress = _province + _city + _detailAddress
                        _this.bussinessItem = _data
                        _this.CardNumber = _data.CardNumber

                        // 商家介绍
                        if (_data.Description) {
                            if (_data.Description.indexOf('\n') >= 0) {
                                const arr = _data.Description.split('\n')
                                arr.forEach(function(item) {
                                    if (item) {
                                        _this.descriptionList.push(item)
                                    }
                                })
                            } else {
                                _this.descriptionList.push(_data.Description)
                            }
                        } else {
                            _this.descriptionList = ['暂无介绍']
                        }
                        // 轮播图
                        if (res.Data.ShopSign) {
                            this.ShopSignList = res.Data.ShopSign.split(',')
                        }
                    }
                })
            },
            // 获取购物车列表
            GetUserCarList() {
                GetUserCarList({
                    priceType: 1,
                    storeId: this.id
                }).then(res => {
                    if (res) {
                        this.carList = res.Data
                        if (this.initClassify) {
                            this.GetSupplierStoreCategory()
                        } else if (this.updateList) {
                            this.changeArr(this.productList, false)
                        }
                    }
                })
            },
            // 获取门店商品分类列表
            GetSupplierStoreCategory() {
                GetSupplierStoreCategory({
                    parent_path: '_0_2_',
                    InfoType: 1,
                    storeId: this.id
                }).then((res) => {
                    if (res) {
                        this.initClassify = false
                        this.classifyList = []
                        const totalClassify = {
                            OrderBy: res.Data.OrderBy,
                            id: res.Data.id,
                            name: res.Data.name,
                            parent_id: res.Data.parent_id,
                            parent_path: res.Data.parent_path,
                            type_id: res.Data.type_id
                        }
                        this.classifyList.push(totalClassify)
                        if (res.Data.children && res.Data.children.length > 0) {
                            res.Data.children.forEach((item) => {
                                this.classifyList.push(item)
                            })
                        }
                        this.activeId = res.Data.id
                        this.requestData.typePath = res.Data.parent_path
                        this.productList = []
                        this.GetWholeSaleListForSku()
                    }
                })
            },
            // 获取商品列表
            GetWholeSaleListForSku() {
                const _this = this
                _this.requestData.storeId = this.id
                GetSupplierStoreProductPage(_this.requestData).then(res => {
                    if (res) {
                        if (res.Data.Data.length && res.Data.Data.length > 0) {
                            console.log('购物车数据')
                            console.log(_this.carList)
                            console.log(res.Data.Data)
                            this.changeArr(res.Data.Data, true)
                            _this.totalAmout = res.Data.TotalAmout
                            _this.scollRequest = true
                            if (_this.scollTop > 0) {
                                _this.$refs.scrollBox.scrollTo(0, _this.scollTop)
                            }
                        }
                    }
                })
            },
            // 滚动距离
            handleScroll() {
                let tabstop = document.querySelector('.tabs1').getBoundingClientRect().top
                if (tabstop < 52.5) {
                    this.scrollTrue = true
                } else {
                    this.scrollTrue = false
                }
            },
            // 
            ddd(data) {
                console.log(data)
                console.log(this.$refs)
            },
            // 列表+加入购物车
            updateCart(item) {
                const _obj = {}
                _obj.ProductId = item.ID
                _obj.Amount = item.Amount
                _obj.SkuId = item.ProductSkuList[0].ID
                _obj.StoreId = this.id
                this.cartRequestList = []
                this.cartRequestList.push(_obj)
                this.AddOrUpdateAmount()
            },
            // 更新购物车
            AddOrUpdateAmount() {
                let param = {}
                param.list = this.cartRequestList
                AddOrEditUserCarList(param).then(res => {
                    if (res) {
                        console.log(res)
                        this.optPopup.show = false
                        this.updateList = false
                        this.GetUserCarList()
                    }
                })
            },
            // 显示多规格加购
            showSpec(item, index) {
                console.log(item)
                this.SpecIndex = index
                this.optPopup.type = 'attr'
                this.optPopup.data = item
                this.optPopup.show = true
            },
            // 关闭多规格弹窗
            closePopup() {
                this.optPopup.show = false
            },
            // 多规格弹窗加入购物车方法
            addCart(arr) {
                console.log(arr)
                this.cartRequestList = arr
                if (this.cartRequestList.length <= 0) {
                    this.$toast.fail('请选择商品')
                    return
                }
                this.AddOrUpdateAmount()
            },
            // 底部购物车组件弹窗 - 清空购物车方法
            cleanCart() {
                this.carList = []
                this.optPopup.change = !this.optPopup.change
                this.changeArr(this.productList, false)
            },
            // 底部购物车组件弹窗 - 更新
            carUpdateCart(bool) {
                if (bool) {
                    this.GetUserCarList()
                } else {
                    this.changeArr(this.productList, false)
                }
            },
            // 打开商品详情弹窗
            goDetailPage(item, index) {
                this.detailIndex = index
                const id = item.ID
                if (id === this.oldID) {
                    this.detailShow = true
                } else {
                    this.oldID = id
                    this.GetCommentListByProduct(id)
                    this.GetInintProductDetailInfo(id)
                }
            },
            // 预约
            goYu(item, index) {
                console.log(this.requestData.Id,item, index, 'yuRequestList预约');
                this.$router.push({
                    path: '/orderSubmit',
                    query: {
                        storeId: this.id,
                        productId: item.ID
                    }
                })
            },
            // 获取商品详情
            GetInintProductDetailInfo(id) {
                GetInintProductDetailInfo({
                    productId: id,
                    InfoType: 1
                }).then(res => {
                    if (res) {
                        this.detailData = res.Data
                        this.detailData.imgList = res.Data.ProductInfo.ImageUrl.split(',')
                        this.detailShow = true
                    }
                })
            },
            // 详情弹窗方法
            clickLeft() {
                this.detailShow = false
            },
            // 获取评价
            GetCommentListByProduct(id) {
                this.commentRequest.product_id = id
                GetCommentListByProduct(this.commentRequest).then(res => {
                    if (res) {
                        console.log(res)
                        this.evaluateData = res.Data
                    }
                })
            },
            // 修改地址
            changeAddress(address) {
                console.log(999)
                this.detailData.UserAddress = address
                // this.$forceUpdate()
            },
            // 整理数据
            changeArr(Arr, isNew) {
                const _this = this
                console.log(this)
                Arr.forEach(item => {
                    // 图片列表
                    if (item.ImageUrl) {
                        const ImgUrlList = _this.$utils.strToArr(item.ImageUrl)
                        item.logo = ImgUrlList[0]
                    }
                    item.BaseUnit = item.DefaultUnit
                    // 单位列表
                    if (item.Unit && item.Unit.indexOf(',') !== -1) {
                        item.UnitList = item.Unit.split(',')
                        item.BaseUnit = item.UnitList[0]
                    }
                    // 换算比例列表
                    if (item.Unitratio && item.Unitratio.indexOf(':') !== -1) {
                        item.UnitratioList = item.Unitratio.split(':')
                    }
                    // 按单限购
                    if (item.ProductSkuList && item.ProductSkuList.length === 1) {
                        item.oLimitBuy = item.ProductSkuList[0].LimitBuy
                    }
                    // 购物车数量（同步）
                    if (_this.carList && _this.carList.length > 0) {
                        const _list = _this.carList
                        for (let i = 0; i < _list.length; i++) {
                            if (_list[i].ProductId === item.ID) { // 判断购物车中的商品是否为当前商品
                                if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 1) { // 多规格商品
                                    for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
                                        if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j]
                                            .SkuList.length > 0) {
                                            for (let k = 0; k < item.ProductSkuAttrList[j].SkuList
                                                .length; k++) {
                                                if (_list[i].SkuId === item.ProductSkuAttrList[j].SkuList[k]
                                                    .ID) {
                                                    item.ProductSkuAttrList[j].SkuList[k].Amount = _list[i]
                                                        .Amount
                                                    console.log('匹配成功')
                                                    break
                                                }
                                            }
                                        }
                                    }
                                } else { // 单规格商品
                                    console.log('同步单规格')
                                    item.Amount = _list[i].Amount
                                    break
                                }
                            } else {
                                item.Amount = 0
                            }
                        }
                    } else {
                        item.Amount = 0
                        if (item.ProductSkuAttrList && item.ProductSkuAttrList.length > 0) { // 多规格商品
                            for (let j = 0; j < item.ProductSkuAttrList.length; j++) {
                                if (item.ProductSkuAttrList[j].SkuList && item.ProductSkuAttrList[j].SkuList
                                    .length > 0) {
                                    for (let k = 0; k < item.ProductSkuAttrList[j].SkuList.length; k++) {
                                        item.ProductSkuAttrList[j].SkuList[k].Amount = 0
                                    }
                                }
                            }
                        }
                    }
                    if (isNew) {
                        _this.productList.push(item)
                    }
                })
            },
            // 滚动事件触发下拉加载
            onScroll() {
                const _this = this
                console.log(this.$utils.getScrollHeight('scrollBox'))
                console.log(this.$utils.getClientHeight('scrollBox'))
                console.log(this.$utils.getScrollTop('scrollBox'))
                if (_this.scollRequest === true) {

                    if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this
                        .$utils.getScrollTop('scrollBox') <= 5) {
                        _this.scollRequest = false
                        // alert('触发！！！')
                        console.log('加载')
                        _this.scollTop = this.$utils.getScrollTop('scrollBox')
                        if (_this.requestData.PageIndex < _this.totalAmout) {
                            _this.requestData.PageIndex++
                            _this.GetWholeSaleListForSku()
                        } else {
                            console.log('end')
                            _this.end = true
                        }
                    }
                }
            },
            // tab置顶
            scroll(data) {
                if (data.isFixed) {
                    this.$refs.tabs.$refs.nav.classList.add('van-tabs__nav_Fixed')
                } else {
                    this.$refs.tabs.$refs.nav.classList.remove('van-tabs__nav_Fixed')
                }
            },
            // 跳转地图
            navigation() {
                console.log('导航')
                console.log(this.bussinessItem)
                this.$utils.navigation(this.bussinessItem)
            },
            // 关闭地图弹出层
            closeAmap() {
                this.AmapShow = false
            },
            // 重置请求参数及数据
            resetParams() {
                this.requestData.PageIndex = 1
                this.requestData.PageSize = 10
                this.scollRequest = true
                this.scollTop = 0
                this.end = false
                this.productList = []
            },
            // 点击分类事件
            treeClickEvent(item, treeItem) {
                if (this.activeId !== item.id) {
                    this.activeId = item.id
                    this.resetParams()
                    this.requestData.typePath = item.parent_path
                    this.GetWholeSaleListForSku()
                }
            },
            // 显示商品促销、配送、规格、参数
            showOpt(type) {
                console.log(type)
                if (this.detailIndex !== this.SpecIndex) {
                    this.optPopup.data = this.productList[this.detailIndex]
                }
                this.optPopup.type = type
                this.optPopup.show = true
            },
        }
    }
</script>

<style lang="scss" scoped>
    .shop-bg {
        width: 100%;
        height: 350px;
    }

    .infbox {
        margin-top: -136px;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    }

    .description {
        text-indent: 2em
    }

    .description:not(:last-child) {
        padding-bottom: 20px
    }

    .van-button--primary {
        @include bg-primary();
        border: none;
        font-size: 16px;
        height: 35px;
        line-height: 35px;
        padding: 0 18px;
        float: right;
    }

    /deep/.van-tabs__nav {
        background: $colorF5;

        .van-tab {
            font-size: 16px;
            font-weight: bold;
        }
    }

    /deep/.van-tabs__nav_Fixed {
        background: $colorF;
    }

    /deep/.van-hairline--top-bottom::after,
    .van-hairline-unset--top-bottom::after {
        border: none;
    }

    .mapPage {
        width: 100%;
        height: 100%;
        z-index: $zIndexOverlay;
    }

    .list-content {
        height: calc(100%);
    }

    // 以上修整完成
    .scoll-y {
        overflow-y: scroll;
    }

    .left-scoll-y {
        background: $colorF4;
        overflow-y: scroll;
    }

    .classifyItem {
        width: 200px;
    }

    .activeIndex {
        background: $colorF;
        position: relative;

        &:before {
            content: '';
            height: calc(100% - 40px);
            width: 8px;
            @include bg-primary();
            position: absolute;
            top: 20px;
            left: 0;
            border-radius: 0 8px 8px 0;
        }
    }

    .van-popup {
        background: transparent;
    }

    .detail-page {
        background: $colorF5;
    }

    .van-tabs__nav--line {
        padding-bottom: 0;
    }

    .tab-bar {
        display: flex;

        flex-direction: row;
        background: $colorF;
        padding: 20px 0;

        .tab-item {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .teb-item-text {
                display: flex;
                font-size: 26px;
                font-weight: bold;
                margin-bottom: 10px;
            }

            .teb-item-border {
                display: flex;
                width: 80px;
                height: 6px;
                border-radius: 3px;
                background: rgba($color: #000000, $alpha: 0);
            }
        }

        .activeBorder {
            .teb-item-text {
                @include color-primary;
            }

            .teb-item-border {
                @include bg-primary();
            }
        }
    }

    .filter-tab {
        display: flex;
        flex-direction: row;
        position: relative;
        padding: 10px 24px 20px;

        .filter-item {
            display: flex;
            flex-grow: 0;
            flex-shrink: 0;
            width: calc(33% - 15px);
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            height: 54px;
            background: $colorF4;
            border: solid 1px $colorF4;
        }

        .filter-checked {
            @include color-primary;
            background: $colorF;
            @include border-primary;
        }

        .filter-active {
            background: transparent;
            color: #000 !important;
            position: relative;
            @include border-primary;

            &:after {
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                @include color-primary;
                @include bg-primary;
                opacity: 0.1;
                border-radius: 10px;
            }
        }

        .change-theme {
            background: $colorF;
            border: solid 1px #171817;
        }

        .filter-pop {
            position: absolute;
            z-index: $zIndexPopup;
            top: 84px;
            left: 0;
            width: 100%;
            height: calc(100vh - 370px);

            .filter-cover {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background: $colorOverlay;
            }

            .filter-pop-content {
                position: relative;
                background: $colorF;

                .filter-pop-item-box {
                    padding: 40px 24px 50px;
                    position: relative;
                    display: flex;
                    flex-wrap: wrap;

                    .filter-pop-item {
                        flex-shrink: 0;
                        flex-grow: 0;
                        position: relative;
                        width: calc(33.33% - 14px);
                        margin-right: 20px;
                        margin-bottom: 20px;
                        text-align: center;
                        line-height: 72px;
                        padding: 0 20px;
                        background: $colorF4;
                        border: solid 1px $colorF4;
                        border-radius: 6px;

                        &:nth-child(3n) {
                            margin-right: 0px;
                        }
            
      }

                    .filter-selected {
                        @include color-primary;
                        border-color: currentColor;

                        &:before,
                        &:after {
                            content: '';
                            position: absolute;
                        }

                        &:before {
                            background: currentColor;
                            width: 54px;
                            height: 54px;
                            border-radius: 100%;
                            bottom: -27px;
                            right: -27px;
                        }

                        &:after {
                            width: 6px;
                            height: 12px;
                            border: 5px solid;
                            border-color: transparent $colorF $colorF transparent;
                            transform: rotate(45deg);
                            bottom: 6px;
                            right: 4px;
                        }
                    }
                }

                .filter-pop-item-box-1 {
                    padding: 30px 24px 40px;
                    font-size: 26px;

                    .filter-pop-item-1 {
                        padding: 30px 0;
                    }

                    .item-checked {
                        position: relative;
                        @include color-primary;

                        &:after {
                            content: '';
                            position: absolute;
                            width: 6px;
                            height: 18px;
                            border: 5px solid;
                            border-color: transparent currentColor currentColor transparent;
                            transform: rotate(45deg);
                            bottom: 40px;
                            right: 10px;
                  }
                          }
                }

                .filter-bottom {
                    padding: 32px 24px;
                    position: relative;

                    .btn {
                        width: calc(50% - 20px);
                        line-height: 72px;
                        border-radius: 8px;
                    }
                }
            }
        }
    }

    .zIndexBottom {
        z-index: $zIndexHeader;
    }

    .skit {
        border-bottom: 1px solid #EBEBEB;
    }

    .tag {
        background: rgba($color: $tsgorg, $alpha: 0.1);
    }
</style>
